<template>
  <div id="type">

   <el-row style="background-color: #fff; padding: 10px;">
      <el-col :span="24">
        <el-button type="primary" plain  @click="add">添加类型</el-button>
      </el-col>
   </el-row>

    <!-- 类型管理 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.list" border style="width: 70%">
            <el-table-column prop="typeName" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="typeState" label="状态"> </el-table-column>
            <el-table-column prop="typeState" label="操作">
              <template slot-scope="scope">
                <button
                  size="mini"
                  @click="update(scope.row)"
                  class="but el-icon-edit"
                ></button>
                <button
                  size="mini"
                  @click="del(scope.row)"
                  class="but el-icon-minus"
                ></button>

              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="typeName"> </el-table-column>

      <el-table-column label="状态" prop="typeState" width="180">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <button
            size="mini"
            @click="update(scope.row)"
            class="but el-icon-edit"
          ></button>
          <button
            size="mini"
            @click="del(scope.row)"
            class="but el-icon-minus"
          ></button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="名称" :label-width="formLabelWidth">
      <el-input v-model="form.typeName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="状态" :label-width="formLabelWidth">
      <el-select v-model="form.typeState" placeholder="请选择">
        <el-option label="可用" :value="1"></el-option>
        <el-option label="禁用" :value="2"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </div>
</el-dialog>

    <el-dialog title="添加" :visible.sync="dialogFormVisible1">
  <el-form :model="addform">
    <el-form-item label="名称" :label-width="formLabelWidth">
      <el-input v-model="addform.typeName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="父级" :label-width="formLabelWidth">
      <el-select v-model="addform.parentId" placeholder="请选择">
        <el-option label="无父类别" value="0"></el-option>
        <el-option :label="item.typeName" :value="item.id" v-for="item in parent"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitadd">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  name: "Type",
  data() {
    return {
      parent:[],
      tableData: [],
      // 弹出框数据
        dialogFormVisible: false,
        dialogFormVisible1: false,
        form: {
              typeName: '',
              parentId: '',
              list: [],
              typeState: 0, //0删除，2禁用，1正常
        },
        addform:{},
        formLabelWidth: '120px',
    };
  },
  methods: {
    // 点编辑
    update(obj) {
      this.dialogFormVisible=true;
      this.form=obj;

    },
    // 点删除
    del(obj) {
      this.changeType(obj.id,0);
    },
    // 点确定编辑
    submit(){
      this.dialogFormVisible=false;
      this.changeType( this.form.id, this.form.typeState);
    },
    add(){
      this.dialogFormVisible1=true;
    },
    submitadd(){
      this.dialogFormVisible1=false;
      console.log(this.addform);
      this.$http.post("/foodType/addFoodType",this.addform).then(resp=>{
        if(resp.data.code==200){
          this.$message.success("添加新类型成功");
          this.getalltype();
          this.getParentType();
          this.addform = {};
        }else{
           this.addform = {};
          this.$message.error(resp.data.message);
          this.getalltype();
          this.getParentType();
        }
      })
    },
    getalltype(){
      this.$http.get("/foodType/showFoodTypeTree").then(resp=>{
        if(resp.data.code==200){
          console.log(resp.data.data);
          this.tableData = resp.data.data;
        }
      })
    },
    getParentType(){
      this.$http.get("/foodType/showParentTypeTree").then(resp=>{
        if(resp.data.code==200){
           console.log(resp.data.data);
          this.parent = resp.data.data;
        }
      })
    },
    changeType(id,typeState){
      this.$http.put("/foodType/changeFoodTypeState",{
        id:id,
        typeState:typeState
      }).then(resp=>{
        if(resp.data.code==200){
          this.$message.success("修改成功！");
          this.getalltype();
          this.getParentType();
        }else{
           this.addform = {};
          this.$message.error(resp.data.message);
          this.getalltype();
          this.getParentType();
        }
      })
    },
  },
  created() {
    this.getalltype();
    this.getParentType();
  },
};
</script>

<style scoped >


:deep() .demo-table-expand {
  font-size: 0;
}
:deep() .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
:deep() .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/*修改展开按钮的样式 start*/
:deep() .el-table__expand-icon {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
/*2.展开按钮未点击的样式是加号带边框*/
:deep() .el-table__expand-icon .el-icon-arrow-right:before {
  content: "\e6d9";
  border: 1px solid #ccc;
  padding: 2px;
}
/*3.展开按钮点击后的样式是减号带边框*/
:deep() .el-table__expand-icon--expanded .el-icon-arrow-right:before {
  content: "\e6d8";
}
</style>



